<html lang="zh-cn">  
<head>  
 <meta charset="UTF-8">  
 <meta name="viewport" content="width=device-width, initial-scale=1.0">  
 <title>自动跳格数字框</title>  
 <style> 
 .weiyi{
    margin-top: 350px;
    margin-left: 600px;
 } 
 input {  
 width:40px;  
 height:40px;  
 font-size:24px;  
 text-align: center;  
 margin:05px;  
 }  
 </style>  
</head>  
<body>  

 <div class="weiyi">  
 <input type="text" maxlength="1" oninput="moveFocus(this,1)" />  
 <input type="text" maxlength="1" oninput="moveFocus(this,2)" />  
 <input type="text" maxlength="1" oninput="moveFocus(this,3)" />  
 <input type="text" maxlength="1" oninput="moveFocus(this,4)" />  
 <input type="text" maxlength="1" oninput="moveFocus(this,5)" />  
 <input type="text" maxlength="1" oninput="moveFocus(this,6)" />  
 </div>  

 <script>  
 function moveFocus(current, index) {  
 if (current.value.length >=1) {   
 current.nextElementSibling.focus();  
  
 }else {  
 current.value = ""; 
 if (index > 1) {  
 current.previousElementSibling.focus();  
 return;
 }
  
 }  
}  
//弹窗输出值
function showValue() {  
 var value = document.getElementsByTagName("input");  
 var result = "";  
 for (var i = 0; i < value.length; i++) {  
 result += value[i].value;  
 }  
 alert(result);  
}
 
function moveFocus(current, index) { if (current.value.length >=1) { // 如果当前输入框不是最后一个，跳转到下一个输入框 
if (index <6) { current.nextElementSibling.focus(); } else { 
     showValue(); } } else {
         if (index >1) { current.previousElementSibling.focus(); } } } // 弹窗输出值
          function showValue() { var value = document.getElementsByTagName("input"); var result = ""; for (var i =0; i < value.length; i++) { result += value[i].value; } alert(result); }
 
 </script>  

</body>  
</html>
